<template>
  <div class="customer-info-container">
    <div></div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card>
          <div style="margin-bottom: 10px">
            <el-text tag="b">跟进过此客户的销售人员</el-text>
          </div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="张三" name="1">
              <div>2023年12月跟进</div>
              <div>2023年12月跟进</div>
            </el-collapse-item>
            <el-collapse-item title="李四" name="2">
              <div>
                Operation feedback: enable the users to clearly perceive their
                operations by style updates and interactive effects;
              </div>
              <div>
                Visual feedback: reflect current state by updating or
                rearranging elements of the page.
              </div>
            </el-collapse-item>
            <el-collapse-item title="马五" name="3">
              <div>
                Simplify the process: keep operating process simple and
                intuitive;
              </div>
              <div>
                Definite and clear: enunciate your intentions clearly so that
                the users can quickly understand and make decisions;
              </div>
              <div>
                Easy to identify: the interface should be straightforward, which
                helps the users to identify and frees them from memorizing and
                recalling.
              </div>
            </el-collapse-item>
            <el-collapse-item title="赵六" name="4">
              <div>
                Decision making: giving advices about operations is acceptable,
                but do not make decisions for the users;
              </div>
              <div>
                Controlled consequences: users should be granted the freedom to
                operate, including canceling, aborting or terminating current
                operation.
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <vab-query-form>
            <vab-query-form-left-panel
              v-if="queryForm.customerid !== 0"
              :span="10"
            >
              <div style="float: left; font-size: 24px">
                {{ customer.CustomerAllName }}
              </div>
            </vab-query-form-left-panel>
            <vab-query-form-right-panel
              v-if="queryForm.customerid !== 0"
              :span="2"
            >
              <div style="float: right; font-size: 14px">
                ID：{{ queryForm.customerid }}
              </div>
            </vab-query-form-right-panel>
          </vab-query-form>
          <div>
            <el-descriptions
              class="margin-top"
              title="客户基本信息"
              :column="3"
              :size="size"
              border
            >
              <template #extra>
                <el-button type="primary">查看更多信息</el-button>
              </template>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <user />
                    </el-icon>
                    Username
                  </div>
                </template>
                kooriookami
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <iphone />
                    </el-icon>
                    Telephone
                  </div>
                </template>
                18100000000
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <location />
                    </el-icon>
                    Place
                  </div>
                </template>
                Suzhou
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <tickets />
                    </el-icon>
                    Remarks
                  </div>
                </template>
                <el-tag size="small">School</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <office-building />
                    </el-icon>
                    Address
                  </div>
                </template>
                No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                Province
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="padding: 20px">
            <el-row>
              <el-col :span="6">
                <el-statistic title="Daily active users" :value="268500" />
              </el-col>
              <el-col :span="6">
                <el-statistic :value="138">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      Ratio of men to women
                      <el-icon style="margin-left: 4px" :size="12">
                        <Male />
                      </el-icon>
                    </div>
                  </template>
                  <template #suffix>/100</template>
                </el-statistic>
              </el-col>
              <el-col :span="6">
                <el-statistic title="Total Transactions" :value="outputValue" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="Feedback number" :value="562">
                  <template #suffix>
                    <el-icon style="vertical-align: -0.125em">
                      <ChatLineRound />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
            </el-row>
          </div>
          <el-divider>名下业务合同</el-divider>
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
          >
            <el-table-column prop="date" label="Date" sortable />
            <el-table-column prop="name" label="Name" sortable />
            <el-table-column prop="address" label="Address" sortable />
          </el-table>
          <div style="height: 50px"></div>
          <el-divider>名下业务产品</el-divider>
          <el-table
            v-loading="listLoading"
            :data="list"
            @selection-change="setSelectRows"
          >
            <el-table-column
              align="center"
              show-overflow-tooltip
              type="selection"
            />
            <el-table-column
              align="center"
              label="id"
              prop="id"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="标题"
              prop="title"
              show-overflow-tooltip
            />
            <el-table-column align="center" label="操作" width="200">
              <template #default="{ row }">
                <el-button text @click="handleEdit(row)">编辑</el-button>
                <el-button text @click="handleDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 50px"></div>
          <el-divider>名下相关账号</el-divider>
          <el-table
            v-loading="listLoading"
            :data="list"
            @selection-change="setSelectRows"
          >
            <el-table-column
              align="center"
              show-overflow-tooltip
              type="selection"
            />
            <el-table-column
              align="center"
              label="id"
              prop="id"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="标题"
              prop="title"
              show-overflow-tooltip
            />
            <el-table-column align="center" label="操作" width="200">
              <template #default="{ row }">
                <el-button text @click="handleEdit(row)">编辑</el-button>
                <el-button text @click="handleDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <div>证照信息</div>
          <div>客户开票信息</div>
          <div>服务跟进记录</div>
          <div>正在服务中</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="Plus" type="primary" @click="handleEdit">
          添加
        </el-button>
        <el-button :icon="Delete" type="danger" @click="handleDelete">
          批量删除
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.title"
              clearable
              placeholder="请输入标题"
            />
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form> -->

    <div></div>

    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { getList, doDelete } from '@/api/customerInfo'
  import Edit from './components/CustomerInfoEdit'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'CustomerInfo',
    components: { Edit },
    setup() {
      const route = useRoute()
      // const router = useRouter()
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        editRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          customerid: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        customer: {},
        tableData: [
          {
            id: 1,
            date: '2016-05-02',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: 2,
            date: '2016-05-04',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: 3,
            date: '2016-05-01',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
            children: [
              {
                id: 31,
                date: '2016-05-01',
                name: 'wangxiaohu',
                address: 'No. 189, Grove St, Los Angeles',
              },
              {
                id: 32,
                date: '2016-05-01',
                name: 'wangxiaohu',
                address: 'No. 189, Grove St, Los Angeles',
              },
            ],
          },
          {
            id: 4,
            date: '2016-05-03',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
        ],
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleEdit = (row) => {
        if (row.id) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { customer, list, total },
        } = await getList(state.queryForm)
        state.customer = customer
        state.list = list
        state.total = total
        state.listLoading = false
      }
      onMounted(() => {
        if (route.query.customerid) {
          state.queryForm.customerid = route.query.customerid
        }
        fetchData()
      })

      return {
        ...toRefs(state),
        setSelectRows,
        handleEdit,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
